<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script src="MYjquery.js"></script>
<link rel="stylesheet" href="swiper/css/swiper-bundle.min.css">
<script src="swiper/js/swiper-bundle.min.js"></script>
<style>
    @font-face {
        font-family: 'icomoon';
        src: url('fonts/icomoon.eot?9rc2z1');
        src: url('fonts/icomoon.eot?9rc2z1#iefix') format('embedded-opentype'),
            url('fonts/icomoon.ttf?9rc2z1') format('truetype'),
            url('fonts/icomoon.woff?9rc2z1') format('woff'),
            url('fonts/icomoon.svg?9rc2z1#icomoon') format('svg');
        font-weight: normal;
        font-style: normal;
        font-display: block;
    }

    /*      
    总布局
     */
     html,
    body {
        position: relative;
        height: 100%;
    }

    body {
        background: #eee;
        font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
        font-size: 14px;
        color: #000;
        margin: 0;
        padding: 0;
    }
    .head {

        position: relative;
        width: 100%;
        height: 30px;
        background-color: black;
    }

    .banner {

        background-color: white;
        position: relative;
        width: 100%;
        height: 200px;
        /* border: black solid 1px; */
        margin-top: 20px;
    }

    .neck {

        /* background-color: white; */
        position: relative;
        left: 150px;
        width: 1200px;
        height: 600px;
        /* border: black 1px solid; */
        margin-top: 20px;
    }

    .content {

        position: relative;
        width: 100%;
        /* border: black 1px solid; */
        margin-top: 20px;
    }

    .content ul:nth-child(n) {
        background-color: white;
        width: 1200px;
        height: 200px;
        /* border: solid 1px black; */
    }

    .foot {

        position: relative;
        width: 100%;
        height: 200px;
        background-color: black;
        margin-top: 20px;
    }

    .sliderbanner {
        position: absolute;
        top: 270px;
        right: 20px;
        background-color: transparent;
        width: 80px;
        height: 300px;
    }

    /* 搜素兰 
     */
    .s {
        position: absolute;
        top: 50px;
        left: 457px;

    }

    .s input {
        float: left;
        width: 480px;
        height: 35px;
        font-family: icmoon;
        border-radius: 0%;
    }

    .go {
        float: left;
        height: 41px;
        width: 61px;
        background-color: black;
        color: white;
        font-family: 'icomoon';
        text-align: center;
        line-height: 41px;
        font-size: larger;
        cursor: pointer;
    }

    .go:hover {
        font-size: 25px;
        font-weight: 700;
    }

    .sort-s {
        display: block;
        position: absolute;
        bottom: -3px;
        left: 440px;
    }

    .sort-s li {
        display: block;
        list-style: none;
        float: left;
        width: 100px;
        height: 40px;
        background-color: black;
        margin: 10px;
        perspective: 500px;
    }

    .box {
        position: relative;
        width: 100%;
        height: 100%;
        transform-style: preserve-3d;
        transition: all 0.5s;
    }

    .front,
    .bottom {
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        text-align: center;
        line-height: 40px;
        font-size: 25px;
        font-weight: 700;

    }

    .bottom {
        font-size: 20px;
        font-family: icomoon;
        background-color: rgb(248, 248, 247);
        transform: translateY(20px) rotateX(-90deg);
    }

    .bottom a {
        color: black;
        text-decoration: none;
    }

    .front {
        background-color: rgb(14, 13, 14);
        color: white;
        transform: translateZ(20px);
    }

    .box:hover {
        transform: rotateX(90deg);
    }

    .logo {
        width: 150px;
        height: 150px;
        border: black solid 1px;
        margin-left: 150px;
    }
    /* 轮播图改 */
    .swiper-container {
        width: 91%;
        height: 80%;
    }
    .main{
        margin-top: 60px;
        position: relative;
    }
    .swiper-slide {
        text-align: center;
        font-size: 18px;
        background: #fff;
        width: 60px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        flex-direction: column;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
        transition: 300ms;
        transform: scale(0.8);
        opacity: 0.6;
    }

    .swiper-slide-active,
    .swiper-slide-duplicate-active {
        transform: scale(1);
        z-index: 999;
        opacity: 1;
    }

    .swiper-slide div {
        width: 500px;
        height: 600px;
        /* background-color: #000; */
    }

    .con1 {
        background-color: #000;
    }

    .con2 {
        background-color: rgb(37, 31, 31);
    }

    .con3 {
        background-color: rgb(173, 50, 50);
    }

    .con4 {
        background-color: rgb(93, 158, 19);
    }

    .con5 {
        background-color: rgb(40, 206, 192);
    }

    .con6 {
        background-color: rgb(93, 19, 179);
    }

    .con7 {
        background-color: rgb(161, 17, 180);
    }

    .con8 {
        background-color: rgb(137, 180, 182);
    }

    .con9 {
        background-color: rgb(44, 7, 61);
    }

    .con10 {
        background-color: rgb(110, 64, 64);
    }

    .swiper-button-next {
        outline: none;
        position: absolute;
        right:0px ;
        display: none;
    }

    .swiper-button-prev {
        outline: none;
        position: absolute;
        left:0px ;
        display: none;
    }
    .left div:nth-child(n) {
        width: 200px;
        height: 75px;
        background-color: rgb(231, 238, 238, 0.5);
        line-height: 75px;
        font-size: 30px;
        text-indent: 20px;
    }

    .left div:nth-child(n):hover {
        background-color: rgb(231, 238, 238);
    }

    .person {
        position: relative;
        width: 300px;
        height: 200px;
        background-color: rgb(231, 238, 238);
    }

    .portrait {
        position: absolute;
        top: 20px;
        left: 110px;
        width: 80px;
        height: 80px;
        border-radius: 50%;
        background-color: white;
        box-shadow: black 1.1px 1.1px 1.1px 1.1px;
    }

    .js,
    .back {
        position: absolute;
        bottom: 30px;
        width: 90px;
        height: 30px;
        border-radius: 15px;
        background-color: black;
        color: white;
        line-height: 30px;
        text-align: center;
    }

    .js {
        left: 30px;
    }

    .js a {
        text-decoration: none;
        color: white;
    }

    .js:hover {
        font-size: 17px;
        font-weight: 700;
    }

    .back {
        right: 30px;
    }

    .back a {
        text-decoration: none;
        color: white;
    }

    .back:hover {
        font-size: 17px;
        font-weight: 700;
    }

    .shopcar {
        width: 300px;
        height: 400px;
        position: relative;
    }

    .shopcar .word {
        font-family: icomoon;
        position: absolute;
        left: -170px;
        width: 300px;
        text-indent: 10px;
        padding-top: 10px;
        height: 20px;
        color: grey;
        font-weight: 600;
    }

    .list {
        position: absolute;
        top: 50px;
        width: 260px;
        height: 200px;
        padding: 20px;
        overflow: hidden;
    }

    .list li {
        list-style: none;
        width: 240px;
        height: 30px;
        background-color: khaki;
        margin: 10px;
        line-height: 30px;
        text-align: center;
        font-size: smaller;
    }

    .left a {
        text-decoration: none;
        color: black;
    }

    /* 内容部分 */
    .content ul {
        position: relative;
        left: 130px;
    }
    .content{
        margin-top: 80px;
    }
    .kind {
        position: relative;
        left: -40px;
        width: 200px;
        height: 200px;
        background-color: black;
        color: white;
        text-align: center;
        line-height: 200px;
        font-size: 40px;
        font-weight: 700;
    }

    .visual {
        position: absolute;
        top: 10px;
        left: 210px;
        z-index: 100;
        width: 900px;
        height: 180px;
        overflow: hidden;
    }

    .menu {
        position: absolute;
        top: 0px;
        left: 0px;
        width: 10000px;
        transition: all 0.1s;
        animation: move 15s ease-in-out infinite alternate;
    }

    @keyframes move {
        0% {
            left: 0px;
        }
        100% {
            left: -1000px;

        }
    }

    .menu li {
        float: left;
        list-style: none;
        width: 180px;
        height: 180px;
        background-color: grey;
        margin-right: 10px;
    }

    .menu li:hover {
        transform: scale(0.9);
        animation-play-state: paused;
    }

    .content a {
        position: absolute;
        display: block;
        top: 0px;
        right: 10px;
        font-family: icomoon;
        color: black;
        text-decoration: none;
    }

    /* tab栏 */
    .fanhui {
        position: absolute;
        bottom: 0px;
        width: 80px;
        height: 50px;
        background-color: black;
        display: none;
        line-height: 50px;
        text-align: center;
        color: white;
    }

    .fanhui:hover {
        font-size: 18px;
        font-weight: 700;
    }

    .sliderbanner a {
        text-decoration: none;
    }

    .sliderbanner li {
        height: 30px;
        width: 80px;
        background-color: rgb(250, 249, 249);
        list-style: none;
        text-align: center;
        line-height: 30px;

    }

    .sliderbanner li:hover {
        background-color: rgb(189, 197, 197, 0.7);
    }

    .sliderbanner li a {
        text-decoration: none;
        color: black;
    }

    /* 购物车 */
    .shopCar {
        position: fixed;
        top: 400px;
        left: -25px;
        width: 50px;
        height: 50px;
        background-color: rgb(0, 0, 0, 0.6);
        border-radius: 50%;
        transition: 0.2s;
        color: white;
        text-align: right;
        line-height: 50px;
        z-index: 10;
    }

    .shopCar::before {
        display: block;
        content: '';
        position: absolute;
        top: 20px;
        right: 10px;
        width: 10px;
        height: 10px;
        border-right: white 2px solid;
        border-bottom: white 2px solid;
        transform: rotate(-45deg);
    }

    .shopCar::after {
        font-family: icomoon;
        content: '';
        display: none;
        position: absolute;
        color: white;
        font-size: 20px;
        top: 2px;
        left: 15.5px;
    }

    .shopCar:hover {
        left: 0px;
    }

    .shopCar:hover.shopCar::before {
        display: none;
    }

    .shopCar:hover.shopCar::after {
        display: block;
    }

    .car {
        position: fixed;
        top: 140px;
        left: -300px;
        width: 300px;
        height: 500px;
        background-color: white;
        z-index: 200;
    }
</style>

<body>
    <div class="head" id="tou"></div>
    <div class="above">

        <div class="all">
            <div class="banner">
                搜素
                <div class="logo">logo</div>
                <div class="s">
                    <input type="text" placeholder="搜好货(s键快速搜索)" class="search">
                    <div class="go"></div>
                </div>
                <ul class="sort-s">
                    <li>
                        <div class="box">
                            <div class="front">front</div>
                            <div class="bottom"><a href="#">去瞧瞧</a></div>
                        </div>
                    </li>
                    <li>
                        <div class="box">
                            <div class="front">front</div>
                            <div class="bottom"><a href="#">去瞧瞧</a></div>
                        </div>
                    </li>
                    <li>
                        <div class="box">
                            <div class="front">front</div>
                            <div class="bottom"><a href="#">去瞧瞧</a></div>
                        </div>
                    </li>
                    <li>
                        <div class="box">
                            <div class="front">front</div>
                            <div class="bottom"><a href="#">去瞧瞧</a></div>
                        </div>
                    </li>
                </ul>
            </div>
            <script>
                var search = document.querySelector('.search')
                document.addEventListener('keyup', function (e) {
                    if (e.keyCode == 83) {
                        search.focus();
                    }
                })
            </script>
            <div class="neck">
                <div class="main">
                    <div class="swiper-container get_job">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide">
                                <div class="con1"></div>
                            </div>
                            <div class="swiper-slide">
                                <div class="con2"></div>
                            </div>
                            <div class="swiper-slide">
                                <div class="con3"></div>
                            </div>
                            <div class="swiper-slide">
                                <div class="con4"></div>
                            </div>
                            <div class="swiper-slide">
                                <div class="con5"></div>
                            </div>
                            <div class="swiper-slide">
                                <div class="con6"></div>
                            </div>
                            <div class="swiper-slide">
                                <div class="con7"></div>
                            </div>
                            <div class="swiper-slide">
                                <div class="con8"></div>
                            </div>
                            <div class="swiper-slide">
                                <div class="con9"></div>
                            </div>
                            <div class="swiper-slide">
                                <div class="con10"></div>
                            </div>
                        </div>
                        <!-- Add Pagination -->
                        <div class="swiper-pagination"></div>
                    </div>
                    <!-- Add Arrows -->
                    <div class="swiper-button-next"></div>
                    <div class="swiper-button-prev"></div>
                </div>
                <script>
                    var main = document.querySelector('.main');
                    var next = document.querySelector(".swiper-button-next");
                    var prev = document.querySelector(".swiper-button-prev");
                    var container = document.querySelector('.swiper-container');
                    main.addEventListener('mouseenter', function () {
                        next.style.display = 'block';
                        prev.style.display = 'block';
                    })
                    main.addEventListener('mouseleave', function () {
                        next.style.display = 'none';
                        prev.style.display = 'none';
                    })
                </script>
                <script>
                    var swiper = new Swiper('.swiper-container', {
                        // 能显示的个数
                        slidesPerView: 3,
                        spaceBetween: 30,
                        centeredSlides: true,
                        loop: true,
                        pagination: {
                            el: '.swiper-pagination',
                            clickable: true,
                        },
                        navigation: {
                            nextEl: '.swiper-button-next',
                            prevEl: '.swiper-button-prev',
                        },
                    });
                </script>
            </div>
            <div class="content">
                <ul class="a1">
                    <div class="kind" id="a1">KIND1 </div>
                    <div class="visual">
                        <div class="menu">
                            <li>1</li>
                            <li>2</li>
                            <li>3</li>
                            <li>4</li>
                            <li>5</li>
                            <li>6</li>
                            <li>7</li>
                            <li>8</li>
                            <li>9</li>
                            <li>10</li>
                        </div>
                    </div>
                    <a href="#">更多</a>
                </ul>
                <ul class="a2">
                    <div class="kind" id="a2">KIND2</div>
                    <div class="visual">
                        <div class="menu">
                            <li>1</li>
                            <li>2</li>
                            <li>3</li>
                            <li>4</li>
                            <li>5</li>
                            <li>6</li>
                            <li>7</li>
                            <li>8</li>
                            <li>9</li>
                            <li>10</li>
                        </div>
                    </div>
                    <a href="#">更多</a>
                </ul>
                <ul class="a3">
                    <div class="kind" id="a3">KIND3</div>
                    <div class="visual">
                        <div class="menu">
                            <li>1</li>
                            <li>2</li>
                            <li>3</li>
                            <li>4</li>
                            <li>5</li>
                            <li>6</li>
                            <li>7</li>
                            <li>8</li>
                            <li>9</li>
                            <li>10</li>
                        </div>
                    </div>
                    <a href="#">更多</a>
                </ul>
                <ul class="a4">
                    <div class="kind" id="a4">KIND4</div>
                    <div class="visual">
                        <div class="menu">
                            <li>1</li>
                            <li>2</li>
                            <li>3</li>
                            <li>4</li>
                            <li>5</li>
                            <li>6</li>
                            <li>7</li>
                            <li>8</li>
                            <li>9</li>
                            <li>10</li>
                        </div>
                    </div>
                    <a href="#">更多</a>
                </ul>
                <ul class="a5">
                    <div class="kind" id="a5">KIND5</div>
                    <div class="visual">
                        <div class="menu">
                            <li>1</li>
                            <li>2</li>
                            <li>3</li>
                            <li>4</li>
                            <li>5</li>
                            <li>6</li>
                            <li>7</li>
                            <li>8</li>
                            <li>9</li>
                            <li>10</li>
                        </div>
                    </div>
                    <a href="#">更多</a>
                </ul>
                <ul class="a6">
                    <div class="kind" id="a6">KIND6</div>
                    <div class="visual">
                        <div class="menu">
                            <li>1</li>
                            <li>2</li>
                            <li>3</li>
                            <li>4</li>
                            <li>5</li>
                            <li>6</li>
                            <li>7</li>
                            <li>8</li>
                            <li>9</li>
                            <li>10</li>
                        </div>
                    </div>
                    <a href="#">更多</a>
                </ul>
                <ul class="a7">
                    <div class="kind" id="a7">KIND7</div>
                    <div class="visual">
                        <div class="menu">
                            <li>1</li>
                            <li>2</li>
                            <li>3</li>
                            <li>4</li>
                            <li>5</li>
                            <li>6</li>
                            <li>7</li>
                            <li>8</li>
                            <li>9</li>
                            <li>10</li>
                        </div>
                    </div>
                    <a href="#">更多</a>
                </ul>
                <ul class="a8">
                    <div class="kind" id="a8">KIND8</div>
                    <div class="visual">
                        <div class="menu">
                            <li>1</li>
                            <li>2</li>
                            <li>3</li>
                            <li>4</li>
                            <li>5</li>
                            <li>6</li>
                            <li>7</li>
                            <li>8</li>
                            <li>9</li>
                            <li>10</li>
                        </div>
                    </div>
                    <a href="#">更多</a>
                </ul>
            </div>
            <div class="sliderbanner">
                <li><a href="#a1">kind1</a></li>
                <li><a href="#a2">kind2</a></li>
                <li><a href="#a3">kind3</a></li>
                <li><a href="#a4">kind4</a></li>
                <li><a href="#a5">kind5</a></li>
                <li><a href="#a6">kind6</a></li>
                <li><a href="#a7">kind7</a></li>
                <li><a href="#a8">kind8</a></li>
                <a href="#tou">
                    <div class="fanhui">返回顶部</div>
                </a>
            </div>
            <script>
                var sliderbanner = document.querySelector('.sliderbanner');
                var fanhui = document.querySelector('.fanhui');
                document.addEventListener('scroll', function () {
                    if (window.pageYOffset >= 300) {
                        sliderbanner.style.position = 'fixed';
                        sliderbanner.style.top = '30' + 'px'
                    }
                    else {
                        sliderbanner.style.position = 'absolute';
                        sliderbanner.style.top = '270' + 'px';
                    }
                    document.addEventListener('scroll', function () {
                        if (window.pageYOffset >= 890) {
                            fanhui.style.display = 'block';
                        } else {
                            fanhui.style.display = 'none';
                        }
                    })
                })
            </script>
        </div>
        <div class="shopCar"></div>
            <div class="car">
                <div class="person">
                    <div class="portrait"></div>
                    <div class="js"><a href="购物车.htm">快速结算</a></div>
                    <div class="back"><a href="登录页面.htm">账户注销</a></div>
                </div>
                <div class="shopcar">
                    <div class="word">我的购物车</div>
                    <div class="list"></div>
                </div>
            </div>
        </div>    
                <script>
                    var list = document.querySelector('.list');
                    var content = document.querySelector('.content');
                    var visual = document.querySelectorAll('.visual');
                    var menu = document.querySelectorAll('.menu');
                    var shopCar = document.querySelector('.shopCar');
                    var lis = document.querySelectorAll('.menu li');
                    var car = document.querySelector('.car');
                    $('.shopCar').click(function(){
                        $(this).css('display','none');
                        console.log('1');
                        $('.car').animate({
                                left:0
                            },500);
                    })
                    $('.car').mouseleave(function(){
                        $(this).stop().animate({
                                left:-300
                            },500,function(){
                                $('.shopCar').css('display','block');
                            });
                    })
                </script>
                <script>
                    list.addEventListener('mouseenter', function () {
                        this.style.overflow = 'auto';
                    })
                    list.addEventListener('mouseleave', function () {
                        this.style.overflow = 'hidden';
                    })
                </script>
                <script>
                    for (var i = 0; i < lis.length; i++) {
                        lis[i].addEventListener('click', function () {
                            console.log(this.innerHTML);
                            var product = document.createElement('li');
                            list.insertBefore(product, list.children[0]);
                            var word = this.innerHTML;
                            product.innerHTML = '您已选择商品:' + word + ',等待您的确认';
                        })
                    }

                </script>
                <div class="foot"></div>
            </div>
        </div>
</body>

</html>